<template>
    <!-- 查看咨询详情 -->
    <div class="app-container">
        <div class="Information">
            <el-row>
                <el-form label-width="80px">
                    <el-col :span="3">
                        <el-form-item label="姓名:">{{ form.student.name }} </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item label="性别:">{{ form.student.sex == '0' ? '男' : '女' }} </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="专业:">{{ form.psyConsAptStu.ds }} </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="电话:">{{ form.student.name }} </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="注册号:">{{ form.student.sno }} </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="民族:">{{ form.student.nation }} </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label="出生年月:">{{ form.student.birthday }} </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="政治面貌:">{{ form.student.political }} </el-form-item>
                    </el-col>
                    <el-button @click="check" style="background-color: #93D2F3;color: #FFF;float: right;">查看明细</el-button>
                </el-form>

            </el-row>
            <studentInfors ref="saveDialog" :forms="studentForm" :deptOptions="deptOptions" ></studentInfors>
        </div>
        <div class="text-details">
            <h3>预约信息</h3>
            <div class="mack">
                <span>预约咨询师:{{ form.psyConsAptStu.consName }}</span>
                <span>预约时间段:{{ form.psyConsAptStu.aptStartEndTimeStr }}</span>
            </div>
            <div>
                咨询诉求: {{ form.psyConsAptStu.consReqCont }}
            </div>
        </div>
        <div class="text-details">
            <h3>家庭信息</h3>
            <el-table border :data="form.familiesList" style="width: 100%">
                <el-table-column prop="reasonStatus" label="与本人关系" align="center">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.bc_student_famliy" :value="scope.row.reasonStatus"></dict-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" align="center">

                </el-table-column>
                <el-table-column prop="familyMobile" label="联系方式" align="center">

                </el-table-column>
                <el-table-column prop="wechatCode" label="微信号" align="center">

                </el-table-column>
                <el-table-column prop="unit" label="工作单位" align="center">

                </el-table-column>
                <el-table-column prop="duties" label="职务" align="center">
                </el-table-column>
            </el-table>
        </div>
        <div class="text-details">
            <h3>成绩信息</h3>
            <el-table border :data="form.scoresList" style="width: 100%">
                <el-table-column label="注册号" prop="zch" align="center" />
                <el-table-column label="班级排名" prop="bjpm" align="center" />
                <el-table-column label="文化课最低分" prop="whkzdf" align="center" />
                <el-table-column label="平均成绩" prop="pjcj" align="center" />
            </el-table>
        </div>
        <div class="text-details">
            <h3>评价信息</h3>
            <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                    <template slot="label">学号</template>
                    {{ form.studentEvaluateInfo.registerCode }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">姓名</template>
                    {{ form.studentEvaluateInfo.studentName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">学年</template>
                    {{ form.studentEvaluateInfo.gradeName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">班级</template>
                    {{ form.studentEvaluateInfo.className }}
                </el-descriptions-item>
                <el-descriptions-item span="2">
                    <template slot="label">院系</template>
                    {{ form.studentEvaluateInfo.college }}
                </el-descriptions-item>
                <el-descriptions-item v-for="item in form.studentEvaluateInfo.evaluateScoreList"
                    :key="item.quotaDescription">
                    <template slot="label">
                        {{ item.quotaDescription }}
                    </template>
                    <el-tag size="small">{{ item.realScore }}</el-tag> 分
                </el-descriptions-item>
                <!-- <el-descriptions-item>
                        <template slot="label">上课出勤</template>
                        <el-tag size="small"> {{form.studentEvaluateInfo.registerCode}}</el-tag>分
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">也不归宿</template>
                        <el-tag size="small"> {{form.studentEvaluateInfo.registerCode}}</el-tag>分
                    </el-descriptions-item> -->
            </el-descriptions>
        </div>
        <div class="text-details">
            <h3>其他信息</h3>
            <el-row>
                <el-col :span="8">
                    2022年 国家奖学金 一般贫困生
                </el-col>
                <el-col :span="8">
                    2022年 国家奖学金 一般贫困生
                </el-col>
            </el-row>
        </div>
        <div class="text-details">
            <h3>心里咨询明细</h3>
            <el-table border :data="form.psyConsAptList" style="width: 100%">
                <el-table-column prop="aptStartEndTimeStr" label="时间" align="center">
                </el-table-column>
                <el-table-column prop="consName" label="咨询师" align="center">
                </el-table-column>
                <el-table-column prop="consReqCont" label="咨询内容" align="center">
                </el-table-column>
                <el-table-column prop="consReqs" :formatter="reqType" label="咨询诉求" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import studentInfors from "@/views/components/student/index";
import { deptTreeSelect } from "@/api/system/user";
import { getDicts } from "@/api/system/dict/type";
export default {
    components: { studentInfors },
    dicts: [

        "bc_student_famliy", // 家庭关系
    ],
    data() {
        return {
            deptOptions: [],
            form: {
                studentEvaluateInfo: {
                    registerCode: '',
                    studentName: '',
                    deName: '',
                    className: '',
                    studentName: '',
                    college: '',
                    evaluateScoreList: []
                }
            },
            reqTypeList:[],
            studentForm:{}
        }
    },
    created() {
        getDicts("psy_cons_req_type").then(res => {
               this.reqTypeList = res.data.map(item => {
                    return {
                        value: item["dictValue"],
                        label: item["dictLabel"]
                    };
                });
            });
       
        this.form = this.$route.query
       if(this.form.studentEvaluateInfo == null) {
        this.form.studentEvaluateInfo = {
            registerCode: '',
                    studentName: '',
                    deName: '',
                    className: '',
                    studentName: '',
                    college: '',
                    evaluateScoreList: []
        }
       }
        
        console.log(this.form,this.studentForm,'传递的数据')
        getDicts("bc_political_type").then(res => {
            res.data.forEach(e => {
                   if(this.form.student.political == e.dictValue) {
                    this.form.student.political = e.dictLabel
                   }
            })
            });
        getDicts("bc_nation_type").then(res => {
            res.data.forEach(e => {
                   if(this.form.student.nation == e.dictValue) {
                    this.form.student.nation = e.dictLabel
                   }
            })
            });
        this.department()

    },
    methods: {
        // 获取部门信息
        async department() {
            await deptTreeSelect().then(res => {
                this.deptOptions = res.data;
            });
        },
        reqType(row) {
           
            let colorArr = []; //新建一个数组
            row.consReqs.forEach((item, index) => {
                this.reqTypeList.forEach(i => {
                    if(item == i.value) {
                        colorArr.push(i.label + ';')
                        return colorArr
                    }
                })
            });
            return colorArr; //将有分隔符的颜色数组返回
        },
        check() {
            this.studentForm = this.$route.query.student
            this.$refs.saveDialog.openDia();
            this.$refs.saveDialog.getGradeInfor();

        }
    }

}
</script>
<style scoped>
.Information {
    background-color: #EFEFEF;
    padding: 1% 2% 0 2%;
    margin-bottom: 2%;
}

.text-details {
    background-color: #EFEFEF;
    padding: 1% 2% 2% 2%;
    margin-bottom: 2%;
}

.mack {
    margin: 4% 0;
}

.mack span:nth-child(1) {
    margin-right: 10%;
}
</style>